<template>
	<ls-page page-class="z-overspread-page" title="订单详情" id="page">
		<view class="details-container">
			<!-- 剩余支付时间 -->
			<view v-if="state === '未支付'" class="details-container-time">
				剩余支付时间
				<van-count-down :time="detail.timeDiff" format="mm : ss "  />
			</view>

			<!-- 订单信息头部 -->
			<view class="details-container-header">
				<view class="header-left">订单号：{{ id }}</view>
				<view class="header-right">{{ state }}</view>
			</view>

			<!-- 商品列表 -->
			<view class="details-container-goods">
				<template  v-for="(v, k) in detail.orderGoodsInfos" :key="v.id" >
					<view class="goods-item" v-if="v.itemType == '1'">
						<view class="goods-item-left">
							<image class="left-img" v-if="v.attachment" :src="v.attachment" mode="aspectFill" />
							<image class="left-img" v-else src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png" mode="aspectFill" />
							<view class="left-main">
								<view class="main-upper">
									<view  :class="['main-upper-type',v.itemType == '2' ? 'combo' : 'single']">
										{{ v.itemType === '2' ? '套餐' : '单品' }}
									</view>
									<view class="main-upper-title">{{ v.goodsName }}</view>
								</view>
								<view class="main-tips">{{ v.flavor }}</view>
								<view class="main-below">
									<view class="main-below-now">￥{{ v.salePrice }}</view>
									<!-- 你可以根据需求启用折扣前价格 -->
									<!-- <view class="main-below-before">￥{{v.totalAmt}}</view> -->
								</view>
							</view>
						</view>
						<view class="goods-item-right">
							<view v-if="v.operType === '0'" class="right-back">退菜</view>
							<view>x{{ v.orderQty }}</view>
						</view>
					</view>
                      <!-- 套餐 -->		
						<template v-if="v.itemType == '2'">
							  <view class="goods-item" >
										<view class="goods-item-left">
											<image class="left-img" v-if="v.attachment" :src="v.attachment" mode="aspectFill" />
											<image class="left-img" v-else src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png" mode="aspectFill" />
											<view class="left-main">
												<view class="main-upper">
													<view  :class="['main-upper-type',v.itemType == '2' ? 'combo' : 'single']">
														{{ v.itemType === '2' ? '套餐' : '单品' }}
													</view>
													<view class="main-upper-title">{{ v.goodsName }}</view>
													<image class="cm-cart-panel__fold" :class="v.IsShow === true ? '' : 'cm-cart-panel__fold_spe'"
														src="https://oss.jtmckj.com/wmp/kbq/common/i_radio_top.png" 
														@click="onFold(k)"></image>
													<view class="main-below-now main-below-prics">￥{{ v.salePrice }}</view>
												</view>
												<view style="font-size: 24rpx;color: #666666;">
													规格：{{v.uomName}}
												</view>
												<view class="main-tips">{{ v.flavor }}</view>
												<view class="main-below">
										
													<!-- 你可以根据需求启用折扣前价格 -->
													<!-- <view class="main-below-before">￥{{v.totalAmt}}</view> -->
												</view> 
											</view>
										</view>
										<view class="goods-item-right">
											<view v-if="v.operType === '0'" class="right-back">退菜</view>
											<view>x{{ v.orderQty }}</view>
										</view>
							  </view>
							  <!-- 套餐循环 -->
							  	<view style="padding: 0 24rpx;margin-bottom: 10rpx;padding-left: 120rpx;" v-if="v.IsShow === true "  v-for="(child,k) in v.goodsPriceInfos" :key="k">
							  		<view class="h-24"></view>
							  		<view style="height: 1rpx;background-color: #E6E6E6;"></view>
							  		<view class="h-24"></view>
							  		<view class="chxy-row-bt">
							  			<view style="font-size: 26rpx;color: #212121;">{{child.goodsName}}</view>
							  			<view style="font-size: 26rpx;color: #666666;">￥{{ child.salePrice }}</view>
							  		</view>
							  		<view class="h-20"></view>
							  		<view class="chxy-row-bt">
							  			<view style="font-size: 24rpx;color: #666666;">规格：{{ child.uomName }}</view>
							  			<view style="font-size: 24rpx;color: #666666;">x{{ child.realQty }}</view>
							  		</view>
							  	</view>
						</template>
				</template>
			

				<!-- 展开/收起商品列表 -->
				<view class="goods-showAll" @click="showAll">
					{{ isShowAll ? '收起全部' : '展开全部' }}
					<view :class="{ showALL: isShowAll }" class="goods-showAll-icon"></view>
				</view>
			</view>


			<view class="details-container-payInfo">
				<view class="payInfo-main">
					<view class="payInfo-main-li">
						<view class="li-left">下单时间</view>
						<view class="li-right">{{ dayjs(detail.orderTime).format('YYYY-MM-DD HH:mm:ss') }}</view>
					</view>
					<view class="payInfo-main-li">
						<view class="li-left">订单金额</view>
						<view class="li-right">￥{{ detail.totalAmt }}</view>
					</view>
					<view class="payInfo-main-li">
						<view class="li-left">优惠金额</view>
						<view class="li-right" style="color:#FF3333">￥{{ detail.smallChange }}</view>
					</view>
					<view class="payInfo-main-li">
						<view class="li-left">支付时间</view>
						<view class="li-right">{{ state === '已支付' ? dayjs(detail.payTime).format('YYYY-MM-DD HH:mm:ss') : '-- --' }}</view>
					</view>
					<view class="payInfo-main-li" v-if="detail.payTypeDic && detail.payTypeDic[0]"
						style="padding-bottom:0rpx; display: {{ state === '已支付' ? 'flex' : 'none' }}">
						<view class="li-left">支付方式</view>
						<view class="li-right paySpe">
							<view class="paySpe-list" v-for="(v, k) in detail.payTypeDic" :key="k">
								<text v-if="k !== 0 && v.payAmt > 0">/</text>
								<text v-if="v.payAmt > 0">{{ v.payName ? v.payName : '-- --' }}</text>
							</view>
						</view>
					</view>
					<view class="payInfo-main-li" v-else
						style="padding-bottom:0rpx; display: {{ state === '未支付' || state === '已取消' ? 'flex' : 'none' }}">
						<view class="li-left">支付方式</view>
						<view class="li-right">-- --</view>
					</view>
				
				</view>

				<view class="payInfo-footer" v-show="state !== '未支付'">
					<view class="payInfo-footer-upper">
						<text class="upper-title">已优惠：</text>
						<text class="upper-give">￥{{ detail.smallChange }}</text>
						<text class="upper-title">，支付金额：</text>
						<text class="upper-icon">￥</text>
						<text class="upper-pay">{{ detail.payAmt }}</text>
						<text class="upper-icon"></text>
					</view>
					<view class="payInfo-footer-center" v-for="(v, k) in detail.payTypeDic" :key="k">
						{{ v.payName }}：<text :class="v.payAmt < 0 ? 'back' : ''">￥{{ v.payAmt }}</text>
					</view>
				</view>
			</view>

			<view class="details-container-footer" v-if="state === '未支付'">
				<view class="footer-left">
					<view class="footer-left-value">
						<text class="value-text">￥</text>
						<text class="value-text">{{ detail.totalAmt }}</text>
					</view>
					<view class="footer-left-title">共{{ allNum }}件</view>
				</view>
				<view class="footer-right">
					<!-- <view class="footer-right-cancle" @click="showCancle">取消支付</view> -->
					<view class="footer-right-pay" @click="toPay">继续支付</view>
				</view>
			</view>

			<x-popup v-model:show="showConfirm" @close="onCancle" data-title="提示">
				<view class="popup-login">
					<view class="popup-login-top">
						<view class="top-title">确认要取消订单吗!</view>
					</view>
					<view style="height:60rpx"></view>
					<view class="popup-login-control">
						<view class="popup-login-btn spe" @click="onCancle" data-type="get">取消</view>
						<view class="popup-login-btn" @click="canclePay">确定</view>
					</view>
				</view>
			</x-popup>
		</view>
	</ls-page>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useRoute
	} from 'vue-router';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	// 响应式变量
	const detail = ref({})
	const detail1 = ref({})
	const detail2 = ref({})
	const id = ref('')
	const state = ref('')
	const isShowAll = ref(false)
	const showConfirm = ref(false)
	const allNum = ref(0)
	const detailList = ref('')

	let timeOut = null
	// 获取记录
	const getRecords = async () => {

		const res = await HFiveMemberAppObjProcess({
			"functionName": "GetOrderRecordDetail_H5",
			"contentData": {
				"orderBatchCode": id.value
			}
		})
		console.log(res);
		const expireTime = dayjs(res.expireTime).valueOf()
		const now = dayjs().valueOf() 
		const timeDiffInMilliseconds = expireTime - now
		res.timeDiff  = timeDiffInMilliseconds
		console.log(res.timeDiff);
		// res.timeDiff = 1000 * 10
		if(res.state != "已支付"){
			timeOut = setTimeout(()=>{
				uni.showToast({
				  title: '订单取消',
				  icon: 'none',
				});
				uni.navigateBack();
			},res.timeDiff)
		}
		
			
		
		let newObj = {...res}
		newObj.orderGoodsInfos = newObj.orderGoodsInfos.slice(0,2)
		 const totalQty = res.orderGoodsInfos.reduce((accumulator, currentValue) => {
		                return accumulator + currentValue.orderQty;
		}, 0);
		
		allNum.value = totalQty
		detail.value = newObj
		console.log(detail.value);
		detail1.value =  res
		detail2.value  = newObj
	}

	// 展开或收起详情
	const showAll = () => {
		if (isShowAll.value) {
			detail.value = detail2.value
		} else {
			detail.value = detail1.value
		}
		isShowAll.value = !isShowAll.value
	}
	// const timeOut = (e) => {
	// 	return
	// 	 uni.showToast({
	// 	   title: '订单取消',
	// 	   icon: 'none',
	// 	   duration: 2000
	// 	 });
		 
	// 	 // 延迟 2000ms 后返回上一页
	// 	 setTimeout(() => {
	// 	   uni.navigateBack();
	// 	 }, 2000);
	// }
	// 显示取消确认框
	const showCancle = () => {
		showConfirm.value = true
	}

	// 取消操作
	const onCancle = () => {
		showConfirm.value = false
	}

	// 取消支付
	const canclePay = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		try {
			await HFiveMemberAppObjProcess({
				functionName: 'MemberOrderCancel_H5',
				contentData: {
					orderBatchCode: id.value,
					type:'1' ,// 0不显示取消记录 1 显示取消记录
					// opType:'0' //  0 不验证 1做验证
				}
			})
			uni.hideLoading()
			showConfirm.value = false
			uni.showToast({
			  title: '订单取消',
			  icon: 'none',
			  duration: 2000
			});
			setTimeout(() => {
			  uni.navigateBack();
			}, 2000);
		} catch (error) {
			uni.hideLoading()
			console.error('取消支付失败', error)
		}
	}
	onLoad((options) => {
		uni.removeStorageSync('payAli') // 去除支付宝支付标记
		console.log(options);
		id.value = options.id
		state.value = options.state
		getRecords()

	});
	
	const toPay = ()=>{
		console.log(detail1.value);
		// return
		let goodList = detail1.value?.orderGoodsInfos
		
		goodList = goodList.reduce((acc, obj,k) => {
		  // 如果该对象有 goodsPriceInfos 数组
		  if (obj.goodsPriceInfos && Array.isArray(obj.goodsPriceInfos)) {
		    // 提取 goodsPriceInfos 数组中的每个元素，并将它们作为独立的对象添加到结果数组中
			acc.push(obj);
			obj.indexStr = k
		    obj.goodsPriceInfos.forEach(priceInfo => {
		      acc.push({
		        ...priceInfo, // 将 goodsPriceInfos 中的元素展开到新对象中
				itemType:'3',
				indexStr:k,
		      });
		    });
		  } else {
		    // 如果没有 goodsPriceInfos 数组，直接将原对象添加到结果数组
		    acc.push(obj);
		  }
		  return acc;
		}, []);
		
		let payInfo = {
			orderPayType:'unpay',
			orderBatchCode:detail1.value.orderBatchCode,
			dataList:goodList,
			consumeCode:goodList[0].consumeCode,
			expireTime:detail1.value?.expireTime
		}
		uni.setStorageSync('orderPayInfo',payInfo) // 不用再下单
		console.log(goodList);
		// goodList.forEach(item=>{
		// 	if(item.goodsPriceInfos && item.goodsPriceInfos[0]){
		// 		item.goodsPriceInfos.forEach(v=>{
		// 			v.itemType = 3
		// 		})
		// 	}
		// })
		
		console.log(payInfo);
		// return
		uni.navigateTo({
			url: '/pagesOrder/view/pay/index?goodsList=' + encodeURIComponent(JSON.stringify(goodList)) + '&isPreVip=' + false
		})  
	}
	
	
	const onFold = (index) => {
		detail.value.orderGoodsInfos[index].IsShow = detail.value.orderGoodsInfos[index].IsShow == false ? true : false;
	}
	

	// 页面加载
	// onMounted((options) => {
	
	// })
	 onBeforeUnmount(() => {
		 console.log(11111);
	      clearInterval(timeOut);
	      console.log('定时器已清除');
	});
</script>

<style lang="scss" scoped>
	.details-container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 40rpx 24rpx 209rpx;
		overflow: scroll;

		.details-container-time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
			color: var(--maincolorf1);
			line-height: 48rpx;
			padding: 24rpx 0 60rpx;
			display: flex;
			align-items: center;

			.van-count-down {
				color: var(--maincolorf1);
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				line-height: 48rpx;
			}
		}

		.details-container-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 31rpx;

			.header-left {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--maincolorf1);
				line-height: 28rpx;
			}

			.header-right {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--maincolorf4);
				line-height: 28rpx;
			}
		}

		.details-container-goods {
			background: var(--mainbaccolor10);
			border-radius: 16rpx;
			padding: 40rpx 24rpx 0rpx;
			margin-bottom: 20rpx;

			.goods-item {
				position: relative;
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.goods-item-left {
					display: flex;
					align-items: center;

					.left-img {
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
					}

					.left-main {
						.main-upper {
							display: flex;
							align-items: center;
							margin-bottom: 13rpx;

							.main-upper-type {
								// background: #CCCCCC;
								border-radius: 4rpx;
								text-align: center;
								width: 80rpx;
								padding: 6rpx 0;
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								// color: #2BBCD9;
								line-height: 24rpx;
								margin-right: 10rpx;
								&.combo {
								    background: var(--mainbaccolor17);
								    color: var(--maincolorf12);
								}
								&.single {
								    background: var(--mainbaccolor16);
								    color: var(--maincolorf14);
								}
							}

							.main-upper-title {
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: var(--maincolorf1);
								line-height: 28rpx;
							}
						}

						.main-tips {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: var(--maincolorf2);
							line-height: 24rpx;
							margin-bottom: 21rpx;
						}

						.main-below {
							display: flex;
							align-items: flex-end;

							.main-below-now {
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 36rpx;
								color: var(--maincolorf1);
								line-height: 28rpx;
								margin-right: 12rpx;
							}

							.main-below-before {
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: var(--maincolorf2);
								line-height: 24rpx;
								text-decoration-line: line-through;
							}
						}
					}
				}

				.goods-item-right {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf2);
					line-height: 36rpx;

					.right-back {
						color: var(--maincolorf5);
						padding-bottom: 30rpx;
					}
				}
			}
			.main-below-prics {
				position: absolute;
				right:40rpx;
			}

			.goods-showAll {
				padding-top: 20rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: var(--maincolorf1);
				line-height: 26rpx;
				position: relative;
				padding-bottom: 36rpx;

				.goods-showAll-icon {
					position: absolute;
					top: 26rpx;
					left: 390rpx;
					width: 24rpx;
					height: 15rpx;
					background-image: url('https://oss.jtmckj.com/wmp/kbq/common/i_tra_bottom.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;

					&.showALL {
						transform: rotate(180deg)
					}
				}
			}
		}

		.details-container-payInfo {
			background: var(--mainbaccolor10);
			border-radius: 16rpx;
			padding-top: 6rpx;

			.payInfo-main {
				padding: 40rpx 24rpx;

				.payInfo-main-li {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 40rpx;

					.li-left {
						color: var(--maincolorf2);
					}

					.li-right {
						color: var(--maincolorf1);

						&.paySpe {
							display: flex;
							align-items: center;

							.paySpe-list {}
						}
					}
				}
			}

			.payInfo-footer {
				padding: 0 24rpx 39rpx;
				border-top: 1px solid var(--maincolorbd3);

				.payInfo-footer-upper {
					display: flex;
					align-items: flex-end;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					line-height: 28rpx;
					justify-content: flex-end;
					padding-bottom: 20rpx;

					.upper-title {
						color: var(--maincolorf2);
					}

					.upper-give {
						color: var(--maincolorf5);
					}

					.upper-icon {
						color: var(--maincolorf1);
					}

					.upper-pay {
						font-size: 36rpx;
						line-height: 36rpx;
						color: var(--maincolorf1);
					}
				}

				.payInfo-footer-center {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf2);
					line-height: 24rpx;
					padding-bottom: 20rpx;

					.back {
						color: var(--maincolorf5);
					}

					&.below {
						padding-bottom: 0;
					}
				}

			}
		}

		.details-container-footer {
			padding: 20rpx 24rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: var(--mainbaccolor10);
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			opacity: 0.9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			.footer-left {
				.footer-left-value {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: var(--maincolorf1);
					line-height: 36rpx;
					padding-bottom: 21rpx;

					.value-text {
						font-size: 24rpx;
						line-height: 24rpx;
					}
				}

				.footer-left-title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf1);
					line-height: 24rpx;
				}
			}

			.footer-right {
				display: flex;
				align-items: center;

				.footer-right-cancle {
					border-radius: 40rpx;
					border: 1rpx solid var(--maincolorbd5);
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: var(--maincolorf2);
					line-height: 32rpx;
					padding: 25rpx 58rpx;
				}

				.footer-right-pay {
					background: var(--dt-backcolorPink);
					border-radius: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: var(--maincolor);
					line-height: 32rpx;
					padding: 25rpx 58rpx;
					margin-left: 20rpx;
					// margin-right: 40rpx;
				}
			}
		}
	}

	.popup-login {
		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: var(--maincolorf1);
			line-height: 36rpx;
			padding: 60rpx 0 0 48rpx;
		}

		&-top {
			// display: flex;
			// align-items: center;
			padding: 60rpx 0 0 0rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: var(--maincolorf1);
			line-height: 36rpx;
		}

		.top-title {
			text-align: center;
		}

		&-control {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 48rpx 68rpx;
			text-align: center;
		}

		&-btn {
			border-radius: 16rpx;
			background: var(--dt-backcolorPink);
			// border: 1px solid #ff6b00;
			// padding: 34rpx 0;
			border-radius: 40rpx;
			width: 240rpx;
			height: 80rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: var(--maincolor);
			line-height: 80rpx;
			text-align: center;
			position: relative;

			&.spe {
				background-color: var(--mainbaccolor10);
				border: 2rpx solid var(--maincolorbd5);
				color: var(--maincolorf2);
			}

		}

		&-h2 {
			padding: 0 0 40rpx 48rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: var(--maincolor);
			line-height: 32rpx;
		}

	}
	
	.cm-cart-panel__fold {
		width: 32rpx;
		height: 32rpx;
		padding-left: 30rpx;
		padding-right: 0rpx;
	}
	
	.cm-cart-panel__fold_spe{
		transform: rotate(180deg);
		padding-right: 30rpx;
		padding-left: 0rpx;
	}
</style>